<template>
	<view class="container">
		<view class="user-header">
			<view class="avatar-container" @click="editMessage('avatar',userInfo.avatar,'头像')">
				<u--image :src="urlConstruct(userInfo.avatar)" width="120rpx" height="120rpx" shape="circle"
					:lazy-load="true">
					<view slot="error" class="avatar-error">设置头像</view>
				</u--image>
			</view>
			<view class="user-info">
				<text class="nickname">{{userInfo.nickName}}</text>
				<text class="username">{{userInfo.profile}}</text>
			</view>
		</view>

		<view class="settings-container">
			<u-cell-group>
				<u-cell name="nickName" :value="userInfo.nickName" :isLink="true"
					@click="editMessage('nickName',userInfo.nickName,'昵称')">
					<view slot="title" class="u-slot-title">
						<text class="iconfont icon">&#xe6c0;</text>
						<text class="u-cell-text">昵称</text>
					</view>
				</u-cell>
<!-- 				<u-cell name="avatar" :isLink="true" @click="editMessage('avatar',userInfo.avatar,'头像')">
					<view slot="title" class="u-slot-title">
						<text class="iconfont icon">&#xeb2a;</text>
						<text class="u-cell-text">头像</text>
					</view>
				</u-cell> -->
				<u-cell name="sex" :value="sexName" :isLink="true" @click="editMessage('sex',userInfo.gender,'性别')">
					<view slot="title" class="u-slot-title">
						<text class="iconfont icon">&#xe78c;</text>
						<text class="u-cell-text">性别</text>
					</view>
				</u-cell>
				<u-cell name="email" :value="userInfo.email" :isLink="true"
					@click="editMessage('email',userInfo.email,'邮箱')">
					<view slot="title" class="u-slot-title">
						<text class="iconfont icon">&#xe672;</text>
						<text class="u-cell-text">邮箱</text>
					</view>
				</u-cell>
				<u-cell name="contactInformation" :isLink="true" :value="userInfo.phoneNumber"
					@click="editMessage('contactInformation',userInfo.phoneNumber,'联系方式')">
					<view slot="title" class="u-slot-title">
						<text class="iconfont icon">&#xe638;</text>
						<text class="u-cell-text">联系方式</text>
					</view>
				</u-cell>
				<u-cell name="selfIntroduction" :isLink="true"
					@click="editMessage('profile',userInfo.profile,'个人简介')">
					<view slot="title" class="u-slot-title">
						<text class="iconfont icon">&#xe654;</text>
						<text class="u-cell-text">自我介绍</text>
					</view>
				</u-cell>
				<u-cell name="password" :isLink="true" @click="editMessage('password','-1','修改密码')">
					<view slot="title" class="u-slot-title">
						<text class="iconfont icon">&#xe61e;</text>
						<text class="u-cell-text">修改密码</text>
					</view>
				</u-cell>
			</u-cell-group>
		</view>


	</view>
</template>

<script>
	import {
		logout
	} from "@/api/login";
	import {
		getUserProfileVo,
		updateUserProfile
	} from "@/api/user";
	import {
		picUrlConstruct
	} from "@/utils/picUrlConstruct.js";
	export default {

		data() {
			return {
				userInfo: {
					avatar: '',
					nickName: "你好呀",
					userName: "admin",
					schoolName: "XX大学",
					campusName: "XX学院",
					sex: 0,
					profile: "自我介绍,打撒活动啊速宏达搜好滴傻大搜到阿斯顿撒旦好骚",
					contactInformation: "联系方式",
					email: "32136712361@qq.com"
				},
				sexName: '',
			}
		},
		created() {
			// this.getUserProfile();
		},
		onShow: function() {
			console.log("查询个人信息")
			this.getUserProfile();
		},

		methods: {
			urlConstruct(url) {
				return picUrlConstruct(url);
			},

			editMessage(editKey, currentValue, editName, valueId = undefined, schoolId = undefined) {
				uni.navigateTo({
					url: "/pages/my/profileEdit?editKey=" + editKey + "&currentValue=" + currentValue +
						"&editName=" + editName + "&valueId=" + valueId + "&schoolId=" + schoolId
				})
			},
			// 获取用户信息
			getUserProfile() {
				getUserProfileVo().then(res => {
					console.log("getUserProfile：" + JSON.stringify(res));
					this.userInfo = res.data;
					if (this.userInfo.phoneNumber) {
						this.userInfo.phoneNumber = this.userInfo.phoneNumber.replace(/(\d{3})\d{4}(\d{4})/,
							'$1*​**​*$2')
					}
					this.sexName = this.getSexName(this.userInfo.gender);
					console.log("头像：" + this.userInfo.avatar);
				})
			},
			getSexName(type) {
				if (type == 0) {
					return "男";
				} else if (type == 1) {
					return "女";
				} else if (type == 2) {
					return "其他";
				}
			},
		}
	}
</script>

<style lang="scss">
	$primary-color: #2979FF;
	$border-radius: 16rpx;
	$box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	
	.container {
		background: #f8f8f8;
		min-height: 100vh;
		padding: 30rpx;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	}
	
	.user-header {
		display: flex;
		align-items: center;
		padding: 40rpx 30rpx;
		background: #fff;
		border-radius: $border-radius;
		box-shadow: $box-shadow;
		margin-bottom: 30rpx;
		
		.avatar-container {
			position: relative;
			margin-right: 30rpx;
			
			.avatar-error {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.user-info {
			display: flex;
			flex-direction: column;
			
			.nickname {
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 8rpx;
			}
			
			.username {
				font-size: 28rpx;
				color: #999;
			}
		}
	}
	
	.settings-container {
		background: #fff;
		border-radius: $border-radius;
		box-shadow: $box-shadow;
		overflow: hidden;
		
		.u-cell {
			padding: 20rpx 20rpx;
			
			&:active {
				background-color: #f5f5f5;
			}
		}
		
		.u-slot-title {
			display: flex;
			align-items: center;
			
			.icon {
				margin-right: 20rpx;
				color: $primary-color;
				font-size: 36rpx;
			}
			
			.u-cell-text {
				font-size: 32rpx;
				color: #333;
			}
		}
	}
	
	.logout-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
		padding: 28rpx;
		background: #fff;
		border-radius: $border-radius;
		color: #ff4d4f;
		font-size: 32rpx;
		box-shadow: $box-shadow;
		
		.iconfont {
			margin-right: 15rpx;
			font-size: 36rpx;
		}
		
		&:active {
			background-color: #f5f5f5;
		}
	}
</style>